$breakpoints: ( 'ip4': 'screen and (device-width: 320px) and (-webkit-device-pixel-ratio: 2)', 'ip6': 'only screen and (min-device-width: 375px) and (max-device-width: 667px)') !default;
@mixin respond-to($breakpoint) {
    $query: map-get($breakpoints, $breakpoint);
    @if not $query {
        @error 'No value found for `#{$breakpoint}`. Please make sure it is defined in `$breakpoints` map.';
    }
    @media #{if(type-of($query)=='string', unquote($query), inspect($query))} {
        @content;
    }
}